import React, { Component } from 'react'
import { InputItem, Toast, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import { CodeInput } from '../style'
class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSend: false,
            yztime: 59,
        }
    }
    submit = () => {
        this.props.form.validateFields((error, value) => {
            if (!error) {
                value.type = "code";
                console.log(value)
                this.props.loginHandle(value)
            } else {
                if (error['verifyText']) {
                    Toast.info('请输入正确的手机号', 2)
                } else {
                    Toast.info('输入错误', 2)
                }
            }
        })
    }
    //发送短信
    sendMsg() {
        let { isSend } = this.state;
        if (isSend) {
            Toast.info('请稍后', 2)
            return false;
        }
        this.props.form.validateFields(['verifyText'], (error, value) => {
            if (!error) {
                this.setState({ "isSend": true })
                this.count()
            } else {
                if (error['verifyText']) {
                    Toast.info('请输入正确的手机号', 2)
                }
            }
        })
    }
    //定时器
    count = () => {
        let { yztime } = this.state;
        let siv = setInterval(() => {
            this.setState({ yztime: (yztime--) }, () => {
                if (yztime <= -1) {
                    clearInterval(siv);
                    this.setState({ isSend: false, yztime: 59 })
                }
            });
        }, 1000);
    }
    render() {
        const { getFieldProps } = this.props.form;
        const { isSend, yztime } = this.state;
        return (
            <>
                <InputItem
                    {...getFieldProps('verifyText', {
                        rules: [{ required: true, }]
                    })}
                    placeholder="手机号"
                    ref={el => (this.inputRef = el)}
                />
                <CodeInput >
                    <InputItem
                        {...getFieldProps('password', {
                            rules: [{ required: true }]
                        })}
                        type="password"
                        placeholder="密码"
                        ref={el => (this.inputRef = el)}
                    />
                    <Button type={!isSend ? "primary" : "ghost"} onClick={this.sendMsg.bind(this)} className="btn" inline size="small" > {!isSend ? "获取验证码" : `${yztime}s后`}  </Button>
                </CodeInput>
                <Button type="primary" onClick={this.submit} style={{ 'margin': ".2rem 0" }}>  验证码登录 </Button>
            </>
        )
    }
}
export default createForm()(LoginForm)
